<template>
    <div class="My">
        <div class="myS">
            <van-icon
                name="wap-nav"
                color="#2bd2fc"
                size="30"
                @click="MySettings_TB_Fn(true)"
            />
        </div>

        <!-- 基本信息 -->
        <div class="basic">
            <!-- 头像 -->
            <div class="avatarUrl" :style="{}"></div>

            <div class="p_box">
                <!-- 昵称 -->
                <div class="nickname">{{ nickname }}</div>
                <!-- 介绍 -->
                <div class="signature">
                    {{ signature }}
                </div>
            </div>
        </div>

        <!-- 行为计数 -->
        <div class="behaviorCount">
            <!-- 内容 -->
            <div class="content">
                <!-- 数字 -->
                <div class="num">590</div>
                <!-- 关键词 -->
                <div class="keyword">关注</div>
            </div>
            <div class="content">
                <div class="num">1297</div>
                <div class="keyword">粉丝</div>
            </div>
            <div class="content">
                <div class="num">1568</div>
                <div class="keyword">点赞</div>
            </div>
        </div>

        <!-- 音乐计数 -->
        <div class="musicCount">
            <!-- 内容 -->
            <div class="content con1">
                <!-- 关键词 -->
                <div class="keyword">本地音乐</div>
                <!-- 数字 -->
                <div class="num">168</div>
                <!-- play按钮 -->
                <div class="play"><img src="../assets/暂停.png" alt="" /></div>
            </div>
            <div class="content con2">
                <div class="keyword">最近播放</div>
                <div class="num">128</div>
                <div class="play"><img src="../assets/暂停.png" alt="" /></div>
            </div>
            <div class="content con3">
                <div class="keyword">我的喜欢</div>
                <div class="num">685</div>
                <div class="play"><img src="../assets/暂停.png" alt="" /></div>
            </div>
        </div>

        <!-- 我收藏的歌单 -->
        <div class="othersSongList">
            <!-- 标题 -->
            <div class="tit">
                <!-- 左盒文本 -->
                <div class="p1">
                    <van-icon name="arrow-down" />
                    我收藏的歌单&nbsp;&nbsp;&nbsp;(
                    {{
                        PlayListData.othersAll.others.length +
                        PlayListData.othersAll.others_reserve.length
                    }}
                    )
                </div>
                <!-- 右盒图标 -->
                <div class="right">
                    <van-icon name="bars" @click="othersAllShow" />
                </div>
            </div>

            <!-- 内容盒 -->
            <div class="content_box">
                <!-- 内容 -->
                <div
                    class="content"
                    v-for="(item, index) in PlayListData.othersAll.others"
                    :key="index"
                >
                    <!-- 封面 -->
                    <div
                        @click="goSongSheet(item.id, item.no)"
                        class="coverImgUrl"
                        :style="{
                            backgroundImage: 'url(' + item.coverImgUrl + ')',
                        }"
                    >
                        <div></div>
                    </div>
                    <!-- 歌单名 -->
                    <div class="name">{{ item.name }}</div>

                    <div class="p_box">
                        <!-- 歌曲数量 -->
                        <div class="trackCount">{{ item.trackCount }}首,</div>
                        <!-- 歌单创建者 -->
                        <div class="creatorNickname">
                            {{ item.creatorNickname }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 我创建的歌单 -->
        <div class="userSongList">
            <!-- 标题 -->
            <div class="tit">
                <!-- 左盒文本 -->
                <div class="p1">
                    <van-icon name="arrow-down" />
                    我创建的歌单&nbsp;&nbsp;&nbsp;(
                    {{ PlayListData.user.length }}
                    )
                </div>
            </div>

            <div class="swiper-container-box">
                <!-- 轮播图 -->
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div
                            class="swiper-slide"
                            data-swiper-autoplay="500"
                            v-for="(item, index) in PlayListData.user"
                            :key="index"
                        >
                            <img :src="item.coverImgUrl" alt="" />

                            <div class="p_box">
                                <!-- 歌单名字 -->
                                <div class="name">{{ item.name }}</div>
                                <!-- 歌曲数量 -->
                                <div class="trackCount">
                                    {{ item.trackCount }}首歌
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
import { mapState, mapMutations, mapGetters, mapActions, createNamespacedHelpers } from 'vuex';
const {
    mapState: AccountMapState,
    mapMutations: AccountMapMutations,
    mapGetters: AccountMapGetters,
    mapActions: AccountMapActions
} = createNamespacedHelpers('Account');
export default {
    name: 'My',
    components: {
    },
    data() {
        return {
            othersIds: [],

            PlayListData: {
                user: [
                    // {
                    //     // id
                    //     id: null,
                    //     // 封面路径
                    //     coverImgUrl: '',
                    //     // 歌单名字
                    //     name: '',
                    //     // 歌曲数量
                    //     trackCount: 0
                    // }
                ],
                othersAll: {
                    show: false,
                    others: [// {
                        //     // id
                        //     id: null,
                        //     // 封面路径
                        //     coverImgUrl: '',
                        //     // 歌单名字
                        //     name: '',
                        //     // 歌曲数量
                        //     trackCount: 0,
                        //     // 歌单创建者
                        //     creatorNickname: ''
                        // }
                    ],
                    others_reserve: []
                }
            }
        }
    },
    methods: {
        ...AccountMapMutations(['changeStateProperty']),
        ...mapMutations(['MySettings_TB_Fn']),
        // 切换 收藏歌单显示
        othersAllShow() {
            // 显示开关取反
            this.PlayListData.othersAll.show = !this.PlayListData.othersAll.show;

            let others = this.PlayListData.othersAll.others;
            let others_reserve = this.PlayListData.othersAll.others_reserve;

            // 显示数组 与 备用数组 互相截取
            if (this.PlayListData.othersAll.show) {
                others.push(...others_reserve.splice(0, others_reserve.length));
            } else { others_reserve.push(...others.splice(6, others.length)); }

            // console.log("🚀 ==> othersAllShow ==> this.PlayListData.othersAll", this.PlayListData.othersAll);
        },

        // 跳转到歌单路由
        goSongSheet(id, no) {
            this.$router.push({ name: "SongSheet", query: { id, type: 0, no } });
        },

        // [获取] 用户登录信息
        getStatus(uid) {
            this.axios({
                method: "GET",
                url: "/user/detail",
                params: { uid }
            }).then((result) => {
                console.log("🚀 ==> getStatus ==> result", result);
                if (result.data.code === 200) {
                    this.changeStateProperty({ key: "avatarUrl", value: result.data.profile.avatarUrl });
                    this.changeStateProperty({ key: "nickname", value: result.data.profile.nickname });
                    this.changeStateProperty({ key: "signature", value: result.data.profile.signature });
                    this.changeStateProperty({ key: "level", value: result.data.level });



                    this.getUserPlayList(uid);
                }
            }).catch((err) => {
                console.log("🚀 ==> getStatus ==> err", err);
            });
        },


        // [获取] 用户歌单列表
        getUserPlayList(uid) {
            this.axios({
                method: "GET",
                url: "/user/playlist",
                params: { uid }
            }).then((result) => {
                // console.log("🚀 ==> getUserPlayList ==> result", result);
                if (result.data.code === 200) {
                    console.log("this.uid==>", this.uid);
                    result.data.playlist.forEach((v) => {
                        if (v.userId == this.uid) {
                            this.PlayListData.user.push({
                                id: v.id,
                                coverImgUrl: v.coverImgUrl,
                                name: v.name,
                                trackCount: v.trackCount
                            })
                        }
                        else {
                            if (this.PlayListData.othersAll.others.length < 6) {
                                this.PlayListData.othersAll.others.push({
                                    id: v.id,
                                    coverImgUrl: v.coverImgUrl + '?param=140y140',
                                    name: v.name,
                                    trackCount: v.trackCount,
                                    creatorNickname: v.creator.nickname,
                                    no: true
                                })
                            } else {
                                this.PlayListData.othersAll.others_reserve.push({
                                    id: v.id,
                                    coverImgUrl: v.coverImgUrl + '?param=140y140',
                                    name: v.name,
                                    trackCount: v.trackCount,
                                    creatorNickname: v.creator.nickname,
                                    no: true
                                })
                            }
                        }
                    });

                    if (this.othersIds.length > 0) {
                        this.PlayListData.othersAll.others_reserve.push(...this.othersIds.slice(0))
                    }



                    console.log("🚀 ==> getUserPlayList ==>  this.PlayListData", this.PlayListData);


                    // 生成轮播图
                    setTimeout(() => {
                        this.$nextTick(() => {
                            new Swiper('.swiper-container', {
                                observer: true,
                                observeParents: true,
                                //速度
                                speed: 1500,
                                //自动播放设置
                                autoplay: true,
                                autoplayDisableOnInteraction: false,
                                preventLinksPropagation: false,  // 阻止点击事件冒泡
                                loop: true,
                                slidesPerGroup: 3,
                                effect: 'cube',
                            })
                        });
                    }, 500);
                }
            }).catch((err) => {
                console.log("🚀 ==> getUserPlayList ==> err", err);
            });
        }
    },
    computed: {
        ...AccountMapState(['uid', 'avatarUrl', 'signature', 'nickname', 'level']),
    },
    created() {
        let uid = localStorage.getItem('uid');
        if (!uid) {
            this.$router.push({ name: 'LogOn' });
        } else {
            this.changeStateProperty({ key: "uid", value: uid })
            this.getStatus(uid);


            // 获取会话中的 收藏歌单列表
            this.othersIds = sessionStorage.getItem("othersIds");
            if (this.othersIds) {
                this.othersIds = JSON.parse(this.othersIds);
            } else {
                this.othersIds = [];
            }
        }
    },
}
</script>

<style lang="less">
.My {
    position: fixed;
    padding: 0 20px 120px;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #0c0a31;
    color: #fff;
    overflow: scroll;

    .myS {
        position: absolute;
        right: 10px;
        top: 8px;
    }

    // 基本信息
    .basic {
        margin-top: 50px;
        margin-bottom: 26px;
        display: flex;
        align-items: center;
        // 头像
        .avatarUrl {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin-right: 30px;
            // background: #fff;
            background-image: url('../assets/tx.png');
            background-size: contain;
            background-position: center center;
            flex-shrink: 0;
        }
        .p_box {
            max-width: 240px;
            // 昵称
            .nickname {
                margin-bottom: 13px;
                font-weight: 600;
                font-size: 20px;
                letter-spacing: 1px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                word-break: break-all;
            }
            // 介绍
            .signature {
                color: #897cc0;
                letter-spacing: 1px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                word-break: break-all;
            }
        }
    }

    // 行为计数
    .behaviorCount {
        margin-bottom: 40px;
        display: flex;
        justify-content: space-between;
        letter-spacing: 1px;
        // 内容
        .content {
            width: 20%;
            text-align: center;
            // 数字
            .num {
                font-size: 16px;
                margin-bottom: 5px;
                opacity: 0.9;
            }
            // 关键词
            .keyword {
                color: #897cc0;
            }
        }
    }

    // 音乐计数
    .musicCount {
        margin-bottom: 60px;
        display: flex;
        justify-content: space-between;
        letter-spacing: 1px;

        // 内容
        .content {
            border-radius: 5px;
            width: 28.5%;
            padding-top: 25px;
            text-align: center;
            padding-bottom: 20px;
            background-size: cover;
            background-position: center center;

            &.con1 {
                background-position: center -5px;
                background-image: url('../assets/bg4.png');
            }

            &.con2 {
                background-image: url('../assets/bg5.png');
                background-position: center -30px;
            }
            &.con3 {
                background-image: url('../assets/bg7.png');
                background-position: center -20px;
            }

            // 关键词
            .keyword {
                margin-bottom: 5px;
                opacity: 0.7;
            }
            // 数字
            .num {
                font-size: 24px;
                margin-bottom: 10px;
            }
            // 播放按钮
            .play {
                display: flex;
                width: 20px;
                height: 20px;
                margin: 0 auto;
                opacity: 0.7;
            }
        }
    }

    // 我收藏的歌单
    .othersSongList {
        margin-bottom: 40px;
        // 标题
        .tit {
            margin-bottom: 15px;
            display: flex;
            justify-content: space-between;
            // 左盒文本
            .p1 {
                font-size: 15px;
                i {
                    opacity: 0.7;
                }
            }
            // 右盒图标
            .right {
                font-size: 20px;
                i {
                    margin-left: 5px;
                    opacity: 0.8;
                }
            }
        }

        // 内容盒
        .content_box {
            display: flex;
            flex-wrap: wrap;
            // 内容
            .content {
                margin-bottom: 30px;
                width: 30%;
                margin-right: 5%;
                &:nth-child(3n) {
                    margin-right: 0;
                }

                // 封面
                .coverImgUrl {
                    width: 100%;
                    height: 0;
                    padding-bottom: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: relative;
                    border-radius: 50%;
                    background-size: contain;
                    background-repeat: no-repeat;
                    background-position: center center;

                    &::after {
                        content: '';
                        position: absolute;
                        bottom: -5px;
                        width: 100%;
                        height: 0;
                        padding-bottom: 100%;
                        border-radius: 50%;
                        background: inherit;
                        filter: blur(5px);
                        z-index: -1;
                    }

                    // 空心圆
                    div {
                        position: absolute;
                        bottom: 0;
                        top: 0;
                        right: 0;
                        left: 0;
                        margin: auto;
                        border-radius: 50%;
                        width: 25px;
                        height: 25px;
                        background: #000;
                    }
                }
                // 歌单名
                .name {
                    text-align: center;
                    margin-top: 20px;
                    font-size: 15px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    word-break: break-all;
                }

                .p_box {
                    opacity: 0.6;
                    display: flex;
                    justify-content: center;
                    margin-top: 6px;

                    // 歌曲数量
                    .trackCount {
                        flex-shrink: 0;
                        margin-right: 5px;
                    }

                    // 歌单创建者
                    .creatorNickname {
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        word-break: break-all;
                    }
                }
            }
        }
    }

    // 我创建的歌单
    .userSongList {
        // 标题
        .tit {
            margin-bottom: 5px;
            // 文本
            .p1 {
                font-size: 15px;
                i {
                    opacity: 0.7;
                }
            }
        }
        // 轮播图
        .swiper-container-box {
            .swiper-container {
                .swiper-wrapper {
                    .swiper-slide {
                        overflow: hidden;
                        // 文本盒
                        .p_box {
                            color: #fff;
                            position: absolute;
                            bottom: 0;
                            right: 0;
                            left: 0;
                            background-color: rgba(0, 0, 0, 0.5);
                            letter-spacing: 2px;
                            padding-top: 10px;
                            padding-bottom: 10px;
                            text-align: center;

                            // 歌单名
                            .name {
                                font-size: 18px;
                                margin-bottom: 10px;
                            }
                            // 歌曲数量
                            .trackCount {
                                font-size: 14px;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
